<style scoped lang="scss">

</style>

<template>
  <div>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="人员姓名">
        <el-input v-model="queryParams.persName" placeholder="人员姓名"></el-input>
      </el-form-item>
      <el-form-item label="所属公司">
        <el-select v-model="queryParams.coId" placeholder="所属公司">
          <el-option v-for="item in companyList"
                     :key="item.coId"
                     :label="item.coName"
                     :value="item.coId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
      </el-col>
    </el-row>
    <br>
    <el-table :data="tableData"
              v-loading="loading"
              stripe border
    >

      <el-table-column prop="persId" label="人员主键">
      </el-table-column>
      <el-table-column prop="coName" label="公司">
      </el-table-column>
      <el-table-column prop="persName" label="人员姓名">
      </el-table-column>
      <el-table-column prop="persSex" label="人员性别">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.persSex==1" type="primary">男</el-tag>
          <el-tag v-else-if="scope.row.persSex==0" type="danger">女</el-tag>
          <el-tag v-else type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="persInDate" label="入职时间" :formatter="dateFormat">
      </el-table-column>
      <el-table-column prop="persSalary" label="薪水">
      </el-table-column>
      <el-table-column prop="persRemark" label="备注" :formatter="infoFormat">
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Test",
  components: {
    axios
  },
  created() {

    this.getList();
    this.getCompanyList()
  },
  data() {
    return {
      tableData: [],
      companyList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        persName: null,
        coId: null
      },
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",

      loading: false
    }
  },
  methods: {
    query() {
      this.pageNum = 1
      this.getList()
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.queryParams.pageNum = pageNum
      this.getList()
    },
    dateFormat(row, column, cellValue, index) {
      return cellValue ? cellValue.substring(0, 10) : cellValue
    },
    infoFormat(row, column, cellValue, index) {
      return cellValue.length > 10 ? cellValue.substring(0, 10) + "..." : cellValue
    },
    getList() {
      this.loading = true
      axios({
        method: 'get',
        url: 'http://localhost:9090/person/page',
        params: this.queryParams
      }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.loading = false
      })
    },
    getCompanyList() {
      axios({
        method: 'get',
        url: 'http://localhost:9090/company/list',
        params: {}
      }).then(res => {
        console.log(res.data.data)
        this.companyList = res.data.data
      })
    },
    handleClick() {
      alert('button click');
    },
    onSubmit() {
      console.log('submit!');
    }

  }
}
</script>